<script>
import { add, listByUserAndUrl, remove, update } from "@/views/public/api/viewRecord";
import { isNull } from "@/utils/service";

export default {
  name: "viewRecord",
  props: {
    /** 提供界面数据的方法*/
    provideDataFunc: {
      type: Function,
      required: true
    },
    /** 加载数据至界面的方法*/
    loadDataFunc: {
      type: Function,
      required: true
    }
  },
  computed:{
    batchDeleteDisabled(){
      return this.table.selectRowIds.length === 0
    }
  },
  data() {
    return {
      master: {
        show: false
      },
      edit: {
        title: "添加",
        visible: false,
        param: {
          id: undefined,
          name: "",
          componentUrl: "",
          jsonParam: undefined
        },
        rules: {
          name: [
            {
              validator: (rule, value, callback) => {
                let name = value.replace(/\s/g, "");
                if (isNull(name)) {
                  callback(new Error("请输入名称"));
                }
                if (name.length < 2 || name.length > 30){
                  callback(new Error("名称长度必须在 2~30 个字符之间"));
                }
                callback();
              }, trigger: "blur"
            }
          ]
        }
      },
      table: {
        data: [],
        selectRowIds: [],
        loading: true,
        query:{
          name: "",
          componentUrl: this.$parent.$route.path
        },
      }
    }
  },
  methods: {
    open() {
      this.listByUserAndUrl()
      this.master.show = true;
    },
    selectChange(rows){
      this.table.selectRowIds = rows.map(({id}) => id)
    },
    handleAdd() {
      this.edit.param.id = undefined;
      this.edit.param.name = "";
      // 获取父级组件路径
      this.edit.param.componentUrl = this.$parent.$route.path;
      // 获取界面参数
      this.edit.param.jsonParam = JSON.stringify(this.provideDataFunc());
      this.edit.visible = true;
    },
    /*保存页面记录至当前行记录*/
    haveNowRow(row){
      let _ = this;
      _.edit.param.id = row.id;
      _.edit.param.name = row.name;
      _.edit.param.jsonParam = JSON.stringify(_.provideDataFunc());
      update(this,this.edit.param,r => {_.$message.success("保存成功")})
    },
    /* 加载指定记录参数*/
    loadNowRowParam(row){
      let param = JSON.parse(row.jsonParam);
      this.loadDataFunc(param)
      this.$message.success("加载成功")
    },
    handleUpdate(row){
      this.edit.param.id = row.id;
      this.edit.param.name = row.name;
      this.edit.param.jsonParam = row.jsonParam;
      this.edit.visible = true;
    },
    commitNow() {
      let _ = this;
      let okFunc = r => {
        _.listByUserAndUrl()
        _.edit.visible = false
      }
      if (_.edit.param.id){
        update(_,_.edit.param,okFunc)
      }else{
        add(_,_.edit.param,okFunc)
      }
    },
    handleDelete(ids){
      let _ = this;
      let okFunc = r => {
        _.listByUserAndUrl()
      }
      remove(_,JSON.stringify(ids),okFunc)
    },
    listByUserAndUrl(){
      let _ = this;
      _.table.loading = true;
      listByUserAndUrl(_,_.table.query,r => {
        _.table.data = r
      },f => {_.table.loading = false})
    },
    resetQuery(){
      this.table.query.name = ""
      this.listByUserAndUrl()
    }
  }
};
</script>

<template>
  <div style="display: inline-block">
    <el-button size="mini" type="primary" @click="open">页面记录</el-button>

    <el-drawer
      title="页面记录"
      :visible.sync="master.show"
      direction="btt"
      size="80%"
    >
      <div style="margin: 0 10px">
        <div>
          <el-form :model="table.query" ref="queryForm" size="mini" :inline="true">
            <el-form-item label="名称">
              <el-input style="width: 200px" v-model="table.query.name" placeholder="请输入名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="listByUserAndUrl">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button size="mini" type="success" @click="handleAdd">保存当前界面</el-button>
          <el-popconfirm
            style="margin-left: 5px"
            title="确认删除选中内容吗?"
            @confirm="handleDelete(table.selectRowIds)"
          >
            <el-button
              :disabled="batchDeleteDisabled"
              size="mini"
              type="danger"
              slot="reference"
            >
              移除选中项
            </el-button>
          </el-popconfirm>

        </div>
        <div style="margin: 10px 0">
          <el-table
            :data="table.data"
            @selection-change="selectChange"
            v-loading="table.loading"
            height="60vh"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column label="操作" width="400">
              <template slot-scope="{row}">
                <el-button size="mini" @click="loadNowRowParam(row)" type="info">加载记录</el-button>
                <el-button size="mini" @click="haveNowRow(row)" type="success">保存至此</el-button>
                <el-button size="mini" @click="handleUpdate(row)" type="primary">编辑</el-button>
                <el-popconfirm
                  style="margin-left: 5px"
                  title="确定删除此内容吗？"
                  @confirm="handleDelete([row.id])"
                >
                  <el-button slot="reference" size="mini" type="danger">移除</el-button>
                </el-popconfirm>

              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      :title="edit.title"
      :visible.sync="edit.visible"
      :close-on-click-modal="false"
      width="40%"
    >
      <el-form ref="editForm" :model="edit.param" size="mini" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="edit.param.name" maxlength="30" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="edit.visible = false">取 消</el-button>
        <el-button type="primary" @click="commitNow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style>
</style>